<template>
  <div>
    <el-row style="height: 500px;">
      <search-bar @onSearch="searchResult(1)" ref="searchBar"></search-bar>
      <!-- 列表视图 -->
      <!-- <view-switch class="switch"></view-switch> -->
      <el-tooltip effect="dark" placement="right"
        v-for="item in books.slice((pageNumber-1)*pageSize,pageNumber*pageSize)" :key="item._id">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.title}}</p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>{{item.author}}</span> /
          <span>{{item.date}}</span> /
          <span>{{item.press}}</span>/
          <span>{{item._id}}</span>
        </p>
        <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>
        <el-card style="width: 135px;margin-bottom: 20px;height: 190px;float: left;margin-right: 15px" class="book"
          bodyStyle="padding:8px" shadow="hover">
          <div class="cover">
            <img :src="item.cover" alt="封面">
          </div>
          <div class="info">
            <div class="title">
              <a href="">{{item.title}}</a>
            </div>
            <i class="el-icon-delete" @click="deleteBook(item._id)"></i>
          </div>
          <div class="author">{{item.author}}</div>
        </el-card>
      </el-tooltip>
      <!-- 加号 -->
      <edit-form @onSubmit="searchResult(1)" ref="edit"></edit-form>
    </el-row>
    <el-pagination @current-change="handleCurrentChange" :current-page="pageNumber" :page-size="pageSize" :total="count"></el-pagination>

  </div>
</template>

<script>
import SearchBar from './SearchBar'
import ViewSwitch from './ViewSwitch'
import EditForm from './EditForm'

export default {
  name: 'Books',
  components: {SearchBar, ViewSwitch, EditForm},
  data () {
    return {
      book_three_body: {
        cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180323%2F5a8d03d6a5b140bcb1b1d61d08187422.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621864266&t=e5489fa8d6aff797a787c73c46eb90de',
        title: '三体',
        author: '刘慈欣',
        date: '2019-05-05',
        press: '重庆出版社',
        abs: '文化大革命如火如荼进行的同时。军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展。但在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。地球文明向宇宙发出的第一声啼鸣，以太阳为中心，以光速向宇宙深处飞驰……',
        _id: '0'
      },
      book_zhe_tian: {
        cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F29%2F20170629084650_EuAas.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621864945&t=bcab62de20ab0532aaa6ff634dd4aa0d',
        title: '三体',
        author: '刘慈欣',
        date: '2019-05-05',
        press: '重庆出版社',
        abs: '冰冷与黑暗并存的宇宙深处，九具庞大的龙尸拉着一口青铜古棺，亘古长存。这是太空探测器在枯寂的宇宙中捕捉到的一幅极其震撼的画面。九龙拉棺，究竟是回到了上古，还是来到了星空的彼岸？一个浩大的仙侠世界，光怪陆离，神秘无尽。热血似火山沸腾，激情若瀚海汹涌，欲望如深渊无止境……登天路，踏歌行，弹指遮天。',
        _id: '0'
      },
      books: [
        this.book_three_body, this.book_zhe_tian
      ],
      pageNumber: 1,
      pageSize: 11,
      count: 0
    }
  },
  mounted: function () {
    this.searchResult(1)
  },
  methods: {
    handleCurrentChange: function (pageNumber) {
      this.searchResult(pageNumber)
    },
    searchResult (pageNumber) {
      var _this = this
      var pageSize = this.pageSize
      var title = this.$refs && this.$refs.searchBar && this.$refs.searchBar.keywords
      if (typeof title === 'undefined') {
        title = ''
      }
      this.$axios
        .get('/books/?title=' + title + '&page_size=' + pageSize + '&page_number=' + pageNumber, {
        }).then(resp => {
          if (resp && resp.data.code === '0') {
            _this.books = resp.data.data.books
            _this.count = resp.data.data.count
          }
        })
    },
    deleteBook (bookId) {
      this.$confirm('此操作将永久删除该书籍, 是否继续?' + bookId, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {_id: bookId}
        this.$axios
          .delete('/books/', {data: params}).then(resp => {
            if (resp.data && resp.data.code === '0') {
              this.searchResult(1)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        })
      })
    },
    editBook (item) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.form = {
        cid: item.id,
        cover: item.cover,
        title: item.title,
        author: item.author,
        date: item.date,
        press: item.press,
        abs: item.abs,
        category: {
          id: item.category.id.toString(),
          name: item.category.name
        }
      }
    }
  }
}
</script>
<style scoped>
  .cover {
    width: 115px;
    height: 140px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 115px;
    height: 140px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 102px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  .el-icon-delete {
    cursor: pointer;
    float: right;
  }

  .switch {
    display: flex;
    position: absolute;
    left: 780px;
    top: 25px;
  }

  a {
    text-decoration: none;
  }

  a:link,
  a:visited,
  a:focus {
    color: #3377aa;
  }
  .el-pagination {
    text-align: center;
}
</style>
